<script setup lang="ts">
import { ref, computed } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import { useRouterPush } from '@/hooks/common/router';

defineOptions({ name: 'ClientNav' });

interface NavItem {
  key: string;
  label: string;
  path: string;
  image: string;
}

const navItems: NavItem[] = [
  {
    key: 'home',
    label: '首页',
    path: '/client/home',
    image: 'https://via.placeholder.com/40x40/4F46E5/FFFFFF?text=首页'
  },
  {
    key: 'category',
    label: '分类',
    path: '/client/category',
    image: 'https://via.placeholder.com/40x40/059669/FFFFFF?text=分类'
  },
  {
    key: 'tags',
    label: '标签',
    path: '/client/tags',
    image: 'https://via.placeholder.com/40x40/DC2626/FFFFFF?text=标签'
  },
  {
    key: 'archive',
    label: '归档',
    path: '/client/archive',
    icon: 'mdi:message'
  }
];

const route = useRoute();
const { routerPush } = useRouterPush();

function isActive(path: string): boolean {
  return route.path === path || route.path.startsWith(`${path}/`);
}

function handleNav(path: string) {
  routerPush(path);
}
</script>

<template>
  <div class="flex-y-center gap-24px">
    <div
      v-for="item in navItems"
      :key="item.key"
      class="cursor-pointer p-2 rounded-lg transition-all duration-300 hover:scale-110"
      :class="{ 'ring-2 ring-primary ring-offset-2': isActive(item.path), 'hover:shadow-lg': !isActive(item.path) }"
      @click="handleNav(item.path)"
      :title="item.label"
    >
      <img 
        :src="item.image" 
        :alt="item.label"
        class="w-10 h-10 rounded-lg object-cover"
      />
    </div>
  </div>
</template>

<style scoped></style> 